<template>
  <div class="deploy-history">
    <div class="history-header">
      <h3>{{ deployment?.projectName }} - 部署历史</h3>
      <el-button size="small" @click="refreshHistory" :loading="loading">
        <el-icon><Refresh /></el-icon>
        刷新
      </el-button>
    </div>
    
    <div class="history-content">
      <el-empty v-if="history.length === 0" description="暂无部署历史" />
      <div v-else class="history-list">
        <div
          v-for="record in history"
          :key="record.id"
          class="history-item"
        >
          <div class="history-time">
            {{ formatTime(record.timestamp) }}
          </div>
          <el-tag :type="getStatusType(record.status)" size="small">
            {{ getStatusText(record.status) }}
          </el-tag>
          <div class="history-details">
            <div>分支: {{ record.branch }}</div>
            <div>构建命令: {{ record.buildCommand }}</div>
            <div v-if="record.localDeployPath">本地路径: {{ record.localDeployPath }}</div>
            <div v-if="record.deployPath">远程路径: {{ record.deployPath }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import axios from 'axios'

interface Props {
  deployment: any
}

const props = defineProps<Props>()

const history = ref<any[]>([])
const loading = ref(false)

const loadHistory = async () => {
  if (!props.deployment?.id) return
  
  try {
    loading.value = true
    const response = await axios.get(`/api/deployments/${props.deployment.id}/history`)
    history.value = response.data
  } catch (error) {
    console.error('加载部署历史失败:', error)
  } finally {
    loading.value = false
  }
}

const refreshHistory = () => {
  loadHistory()
}

const formatTime = (time: string) => {
  return new Date(time).toLocaleString('zh-CN')
}

const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    success: 'success',
    failed: 'danger',
    deploying: 'warning'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    success: '部署成功',
    failed: '部署失败',
    deploying: '部署中'
  }
  return statusMap[status] || '未知状态'
}

onMounted(() => {
  loadHistory()
})

watch(() => props.deployment?.id, () => {
  if (props.deployment?.id) {
    loadHistory()
  }
})
</script>

<style scoped>
.deploy-history {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fafafa;
}

.history-header h3 {
  margin: 0;
  color: #303133;
}

.history-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  background-color: #fafafa;
}

.history-time {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
}

.history-details {
  margin-top: 8px;
  font-size: 14px;
  color: #606266;
}

.history-details div {
  margin-bottom: 4px;
}
</style>
